<template>
  <scroll-view class="card-list qc-list" :scroll-y="true">
    <template v-if="qc_report_list.length > 0">
      <view class="card-item" v-for="item in qc_report_list" :key="item.id">
        <view class="top">
          <text class="order-number">SaleOrder number：{{ item.source_uniqid }}</text>
          <text
            :class="['status', item.result === 1 && item.double_check === 0 ? 'green' : 'red']"
            >{{
              item.result === 1 && item.double_check === 0
                ? $t('qcReport.qcPass')
                : $t('qcReport.qcFail')
            }}</text
          >
        </view>
        <view class="middle">
          <scroll-view class="img-list">
            <template v-if="item.images">
              <view class="img-item" v-for="Imgitem in item.images.slice(0, 3)" :key="Imgitem">
                <img :src="Imgitem" alt="" />
              </view>
            </template>
          </scroll-view>
          <!-- <text class="img-number">{{ $t('me.total') + ':' + item.request_count }}</text> -->
        </view>
        <view class="bottom">
          <view class="button-list">
            <view
              class="bottom"
              :class="item.is_have_qc == 0 ? 'view-qc-report' : ''"
              @tap.stop="onToQCReportDetail(item)"
              >{{ $t('me.viewQCReport') }}</view
            >
          </view>
        </view>
      </view>
    </template>
    <template v-else> <NoDataTitle /> </template>
  </scroll-view>
</template>

<script>
import NoDataTitle from '@/components/sys/NoDataTitle.vue'
import { QCREPORTPATH } from '@/constants/router/subPackages'
export default {
  name: 'QCList',
  props: {
    qc_report_list: {
      type: Array,
      default: () => []
    },
    navigateTo: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    onToQCReportDetail(item) {
      uni.navigateTo({
        url: `${QCREPORTPATH}?source_uniqid=${item.source_uniqid}&type=qc`,
        success(res) {
          res.eventChannel.emit('acceptParamsFromMe', {
            data: item
          })
        }
      })
    }
  },
  components: { NoDataTitle }
}
</script>
<style lang="scss" scoped>
@import '../scss/index.scss';
</style>
